{% extends 'auser/homepage.html' %}
{% load staticfiles %}
{% block extra_head %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'auser/css/uploadify.css' %}">
    <link rel="stylesheet" href="{% static 'auser/css/jquery.Jcrop.min.css' %}">
    <script src="{% static 'auser/js/jquery.Jcrop.min.js' %}"></script>
    <script src="{% static 'auser/js/jquery.uploadify.min.js' %}"></script>
    <style type="text/css">

        /* Apply these styles only when #preview-pane has
           been placed within the Jcrop widget */
        .jcrop-holder #preview-pane {
            display: block;
            position: absolute;
            z-index: 2000;
            top: 10px;
            right: -280px;
            padding: 6px;
            border: 1px rgba(0, 0, 0, .4) solid;
            background-color: white;

            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;

            -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        }

        /* The Javascript code will set the aspect ratio of the crop
           area based on the size of the thumbnail preview,
           specified here */
        #preview-pane .preview-container {
            width: 180px;
            height: 180px;
            overflow: hidden;
        }

    </style>
{% endblock %}
<br>
{% block content %}
    <h1>选图片上传</h1>
    <div class="demo-box">
        <form action="{% url 'auser:change_avatar' user.id %}" method="post" enctype="multipart/form-data">

            <input type="file" name="Filedata"/>
            <input type="submit" value="上传"/> {% if message %}{{ message }}{% endif %}
            {% ifequal  upload_flag 1 %}
                <img id="target" src="/media/upload/avatar/temp/{{ savepath }}"/>

                <div id="preview-pane">
                    <div class="preview-container">
                        <img src="/media/upload/avatar/temp/{{ savepath }}" class="jcrop-preview" alt="Preview"/>
                    </div>
                </div>

                <br/><br/>
                <div id="echo_href_msg">
                    <a href="#" onclick="replace_image('1','{{ savepath }}');">你确定要替换原来的图片?</a>
                </div>
            {% endifequal %}
        </form>
    </div>
    <!--
    <p></p>
    <h1>Uploadify组件上传方式</h1>
    <div class="demo-box">
        <input id="file_upload" type="file" name="Filedata">
        <div id="file_uploadQueue" class="uploadifyQueue"></div>
        <p><a href="javascript:$('#file_upload').uploadifyUpload()">上传图片</a>
        <a href="javascript:$('#file_upload').uploadifyClearQueue()">取消上传</a>
        </p>
        <p><span id="id_span_msg"></span></p>
        //-->

{% endblock %}
{% block script %}
    <script type="text/javascript">
        var img_top_margin, img_left_margin, img_width, img_height;
        jQuery(function ($) {
            // Create variables (in this scope) to hold the API and image size
            var jcrop_api,
                boundx,
                boundy,
                topw,
                leftw,

            // Grab some information about the preview pane
            $preview = $('#preview-pane'),
                $pcnt = $('#preview-pane .preview-container'),
                $pimg = $('#preview-pane .preview-container img'),

                xsize = $pcnt.width(),
                ysize = $pcnt.height();

            console.log('init', [xsize, ysize]);
            $('#target').Jcrop({
                onChange: updatePreview,
                onSelect: updatePreview,
                aspectRatio: xsize / ysize
            }, function () {
                // Use the API to get the real image size
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                // Store the API in the jcrop_api variable
                jcrop_api = this;

                // Move the preview into the jcrop container for css positioning
                $preview.appendTo(jcrop_api.ui.holder);
            });

            function updatePreview(c) {
                if (parseInt(c.w) > 0) {
                    var rx = xsize / c.w;
                    var ry = ysize / c.h;
                    console.log("new width:" + Math.round(rx * boundx));
                    console.log("new height:" + Math.round(ry * boundy));

                    console.log("marginTop:" + Math.round(ry * c.y));
                    console.log("marginLeft:" + Math.round(rx * c.x));


                    img_top_margin = c.y;
                    img_left_margin = c.x;
                    img_width = c.w;
                    img_height = c.h;

                    $pimg.css({
                        width: Math.round(rx * boundx) + 'px',
                        height: Math.round(ry * boundy) + 'px',
                        marginLeft: '-' + Math.round(rx * c.x) + 'px',
                        marginTop: '-' + Math.round(ry * c.y) + 'px'
                    });
                }
            }
        });


    </script>
    <script type="text/javascript" charset="utf-8" async defer>
        function replace_image(flag, path) {
            console.log("==========replace_image=======");

            console.log("marginTop:" + img_top_margin);
            console.log("marginLeft:" + img_left_margin);

            console.log("width:" + img_width);
            console.log("height:" + img_height);
            var params = "&marginTop=" + img_top_margin + "&marginLeft=" + img_left_margin + "&width=" + img_width + "&height=" + img_height;
            $.ajax({
                type: "GET",
                url: "{% url 'auser:replace_avatar' user.id %}" + "?replace_flag=" + flag + "&savepath=" + path + params,
                dataType: "json",
                success: function (json) {
                    alert(json.message);
                    document.getElementById("echo_href_msg").innerHTML = json.message;
                    window.location.href = "/auser/homepage/"+{{ this_user.id }}
                }
            })
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#file_upload').uploadify({
                'swf': '/static/movie/uploadify.swf',
                'uploader': "{% url 'auser:change_avatar' user.id %}",
                'method': 'Post',
                'scriptAccess': 'always',
                'folder': '/upload/avatar/temp',
                'auto': false,//
                'multi': true,//设置可以上传多个文件
                'queueSizeLimit': 20,//设置可以同时20个文件
                'removeCompleted': false,//
                'sizeLimit': 10240000,//设置上传文件大小单位kb
                'fileExt': '*.jpg;*.gif;*.png:*.jpeg',//设置上传文件类型为常用图片格式
                'fileDesc': 'Image Files',
                'onInit': function () {
                },
                'onError': function (event, ID, fileObj, errorObj) {
                    $('#id_span_msg').html("上传失败，错误码:" + errorObj.type + " " + errorObj.info);
                },
                'onSelect': function (e, queueId, fileObj) {
                    $('#id_span_msg').html("");
                },
                'onUploadComplete': function (event, data) {
                    if (data.filesUploaded >= 1) {
                        $('#id_span_msg').html("上传成功！");
                    }
                }
            });


        });
    </script>
{% endblock %}